import React from 'react';

export default function ProductIntroduce(props) {
  const msg = {
    bgUrl: '	https://www.unicloud.com/upload/images/2022/1/16da0f9230a1d7d.png',
    title: '弹性云主机',
    description:
      '弹性云主机是一种可按需获取、可灵活配置的云端计算服务，助您打造稳定高可靠、高效低成本的应用部署环境。您可轻松获取业界领先的高性能计算资源以持久运行您的业务并减少运维烦扰。',
  };
  return (
    <>
      <div
        className='product-introduce'
        style={{ backgroundImage: `url(${props.value?.bgUrl || msg.bgUrl})` }}
      >
        <div className='product-wrap'>
          <div className='title'>{props.value?.title || msg.title}</div>
          <div className='des'>
            {props.value?.description || msg.description}
          </div>
          <div className='con'>
            <button>立即购买</button>
            <button>管理控制台</button>
          </div>
        </div>
      </div>
      <style jsx>{`
        .product-introduce {
          height: 424px;
          min-width: 1257px;
          background-size: cover;
          background-repeat: no-repeat;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
        }
        .product-wrap {
          width: 1000px;
        }
        .title {
          font-size: 40px;
          font-weight: bold;
        }
        .des {
          font-size: 14px;
          margin: 20px 0;
        }
        .con {
        }
      `}</style>
    </>
  );
}
